<template>
  <div>
    <h1>{{name}}</h1>
    <h2>{{age}}</h2>
    <hr>
    <button @click="touchMe">touchMe</button>
  </div>
</template>

<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'MyStudent',
    
    data() {
        return {
             name: this.myName,
             age: this.myAge
        }
    },
    //props里的属性无法修改,如果需要修改需要赋值给data里的属性,
    //由此可知vue是先初始化props,再初始化data

    //数组写法: 常用
    // props:['myName','myAge'],

    //对象写法:简写 约定类型
    // props: {
    //     myName: String,
    //     myAge: Number,
    // },
    
    //对象写法:完整写法 约定类型、是否必传、默认值 , required 与 default 在逻辑上是互斥的.
    props:{
        myName:{
            required: true,
            type: String,
        },
        myAge:{
            type: Number,
            default: 99
        }
    },
    methods:{
        touchMe(){
            this.age += 1
        }
    }

});
</script>

<style>
    div{
        background: rebeccapurple;
    }
</style>